﻿<%@ Page Title="PlanetWork" Language="C#" MasterPageFile="~/MasterPage/Foreground.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Planetwork.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        *{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		#container{
			position: relative;
			width: 1083px;
			height: 350px;
			margin: 100px auto 50px auto;
			overflow: hidden;
			box-shadow: 0 0 5px green;
            cursor:pointer;
		}
		#container:hover .arrow{
			display: block;
		}
		#wrap{
			position: absolute;
			width: 7581px;
			height: 350px;
			z-index: 1;
		}
		#wrap img{
			float: left;
			width: 1083px;
			height: 350px;
		}
		#buttons{
			position: absolute;
			right: 40%;
			bottom: 15px;		
			width:200px;
			height: 20px;
			z-index: 2;
		}
		#buttons span{
			width: 6px;
			height: 6px;
			margin-left: 2px;
			border:5px gray solid;
			color:white;
			cursor: pointer;
			display: inline-block;
			text-align: center;
			border-radius: 50%;
		}
		#buttons span.on{
			background-color: gray;
			opacity: 0.6;
		}
		.arrow{
			position: absolute;
			font-size: 50px;
			z-index: 2;
			color: gray;
			top: 40%;
			display: none;
		}
		.arrow:hover{
			background-color: rgba(0,0,0,0.3);
		}		
		#left{
			left:10px;
		}
		#right{
			right: 10px;
		}

        #imageList{
            margin-left:auto;
            margin-right:auto;
            position:relative;
            width:1083px;
        }
        #imageList dl{
            margin:8px;
            box-shadow: 0 0 5px green;
            height:255px;
            width:250px;
        }
        #imageList dd a{
            text-decoration:none;
            margin-left:30%;
            font-size:14px;
            color:gray;
        }
        #imageList dd a:hover{
            color:orange;
        }
        #imageList dt{
            box-shadow: 0 0 5px green;
            margin-bottom:5px;       
        }
        #imageList dt:hover{
            box-shadow: 0 0 5px orange;
        }
       
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
   
    <div id="container">
		<div id="wrap" style="left:-1083px;">
			<img src="Images/5.jpg" alt=""/>
			<img src="Images/1.jpg" alt=""/>
			<img src="Images/2.jpg" alt=""/>
			<img src="Images/3.jpg" alt=""/>
			<img src="Images/4.jpg" alt=""/>
            <img src="Images/5.jpg" alt=""/>
			<img src="Images/1.jpg" alt=""/>
		</div>
        
		<a href="javascript:void(0);" id="left" class="arrow">&lt;</a>
		<a href="javascript:void(0);" id="right" class="arrow">&gt;</a>
		
		<div id="buttons">
			<span class="on"></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

    <div id="imageList" class=" panel panel-default">
        <div class="panel-body">
            <asp:DataList ID="showImageList" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" CellPadding="5" HorizontalAlign="Left">
                <ItemTemplate>
                    <dl>
                        <dt>
                            <a href="<%# "Home/Home.aspx?index=" + Eval("ID") %>"> <asp:Image ImageUrl='<%# "GetImage/Getimage.aspx?imgID=" + Eval("ID") %>' runat="server" CssClass="image"/> </a>
                        </dt>
                        <dd>
                            <a href="<%# "Home/Home.aspx?index=" + Eval("ID") %>"> <%# Eval("Title") %> </a>
                        </dd>
                    </dl>
                </ItemTemplate>
            </asp:DataList>
        </div>
    </div>

    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#topImage").hide();
            
            $("#imageList .image").mouseenter(function () { $(this).animate({ opacity: "0.3" }, 500);}).mouseleave(function () { $(this).animate({ opacity: "1" }, 500); });

            var wrap = document.querySelector("#wrap");
            var prev = document.querySelector("#left");
            var next = document.querySelector("#right");

            prev.addEventListener("click", prevPic, false);
            next.addEventListener("click", nextPic, false);

            var index = 0;
            var spans = document.querySelectorAll("span");
            function showCurrent() {
                for (var i = 0; i < spans.length; i++) {
                    spans[i].className = "";
                }
                spans[index].className = "on";
            }

            function prevPic() {
                index--;
                if (index < 0) {
                    index = 4;
                }
                showCurrent();
                
                if (parseInt(wrap.style.left) == 0) {
                    var currentLeft = "-4332px";
                }
                else {
                    var currentLeft = (parseInt($("#wrap").css("left")) + 1083) + "px";                    
                }

                $("#wrap").animate({ left: currentLeft, opacity: '0.5' }, 500);
                $("#wrap").animate({ opacity: '1' }, 300);                
            }
            //下一张图片
            function nextPic() {
                index++;
                if (index > 4) {
                    index = 0;
                }
                showCurrent();
                
                if (wrap.style.left == "-6498px") {
                    var currentLeft = "-2166px";
                }
                else {
                    var currentLeft = (parseInt(wrap.style.left) - 1083) + "px";                  
                }
                
                $("#wrap").animate({ left: currentLeft, opacity: '0.5' }, 500);
                $("#wrap").animate({ opacity: '1' }, 300);                             
            }

           

            var timer = null;
            function autoPlay() {
                timer = setInterval(function () {
                    nextPic();
                }, 3000);
            }
            autoPlay();

            var container = document.querySelector("#container");
            container.addEventListener("mouseenter", function () {
                clearInterval(timer);
            }, false);
            container.addEventListener("mouseleave", function () {
                autoPlay();
            }, false);

            for (var i = 0, len = spans.length; i < len; i++) {
                (function (i) {
                    spans[i].onmouseenter = function () {
                        var currentLeft = (0 - (i + 1 - 5) * 1083) + "px";
                       
                        $("#wrap").animate({ left: currentLeft, opacity: '0.5' }, 300);
                        $("#wrap").animate({ opacity: '1' },150);
                      //  wrap.style.left = currentLeft;
                        index = i;
                        showCurrent();                        
                    }
                })(i);
            }
        });
    </script>
</asp:Content>
